import React, { Component } from 'react';
import { View, ScrollView } from 'react-native';
import { Button, Tabs, Tab, Icon, CheckBox, List, ListItem, SearchBar, Text } from 'react-native-elements';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import { toast, primaryColor } from '../utils';
import RefreshScrollView from '../widgets/RefreshScrollView';

class ClothesAutoInput extends Component {
  state = { quantityType: null, quantity: 1 }
  onSearch = (search) => this.setState({search}) 
  onSelect = (selectCloth) => {
    this.setState({selectCloth});
  }
  onSelectType = (quantityType) => this.setState({quantityType})
  onAddQuantity = () => this.setState({quantity:this.state.quantity+1})
  onMiniusQuantity = () => this.setState({quantity:Math.max(this.state.quantity-1, 1)})
  onCancelAdd = () => this.setState({selectCloth: null})
  onAddItem = () => {
    const { selectCloth, quantity, quantityType } = this.state;
    if (!quantityType) return toast('Please select laundry type');
    if (!quantity) return toast('Please select quantity');

    let quantityTypeOptions = [];
    if (selectCloth.wash) {
      quantityTypeOptions.push('wash');
    }
    if (selectCloth.dry) {
      quantityTypeOptions.push('dry');
    }
    if (selectCloth.iron) {
      quantityTypeOptions.push('iron');
    }

    this.setState({selectCloth: null, quantityType: null, quantity: 1});
    this.props.onAddItem({productName: selectCloth.name, productId: selectCloth.id,
      quantity, quantityType, quantityTypeOptions});
    toast(`${selectCloth.name} ${this.props.chinese?'已添加':'added'}`);
  }
  render() {
    const { quantityType, quantity, selectCloth } = this.state;
    const chinese = this.props.chinese;
    let clothes = this.props.clothes;
    if (clothes&&this.state.search) {
      clothes = clothes.filter(cloth => cloth.name.toLowerCase().indexOf(this.state.search.toLowerCase())>=0);
    }

    return (
      <Tabs>
        <Tab selected={selectCloth?false:true}>
          <RefreshScrollView refetch={this.props.refetch}>
            <SearchBar inputStyle={{height:50}} lightTheme onChangeText={this.onSearch} placeholder={chinese?'查询衣物':'Search item'}/>
            {clothes&&
              <List>
                {clothes.map((cloth, index) =>
                  <ListItem roundAvatar avatar={{uri:cloth.imageUrl}} key={index} title={cloth.name}
                    onPress={()=>this.onSelect(cloth)}/>
                )}
              </List>
            }
          </RefreshScrollView>
        </Tab>
        <Tab selected={selectCloth?true:false}>
          <RefreshScrollView refetch={this.props.refetch}>
            {selectCloth&&
              <View style={{flex: 1, padding: 16}}>
                <Text h4>{`${chinese?'添加':'Add'} ${selectCloth.name}`}</Text>
                {selectCloth.preference&&<Text style={{fontSize: 20, paddingTop: 16, color: primaryColor}}>Preference: {selectCloth.preference}</Text>}
                <Text style={{fontSize: 20, paddingTop: 16}}>{chinese?'清洗类型':'Laundry Type'}</Text>
                  {selectCloth.wash?<CheckBox title={chinese?'水洗+熨烫':'Wash & Iron'} onPress={()=>this.onSelectType('wash')}
                    checkedIcon='dot-circle-o' uncheckedIcon='circle-o' checked={quantityType==='wash'}/>:null}
                  {selectCloth.dry?<CheckBox title={chinese?'干洗+熨烫':'Dry Clean & Iron'} onPress={()=>this.onSelectType('dry')}
                    checkedIcon='dot-circle-o' uncheckedIcon='circle-o' checked={quantityType==='dry'}/>:null}
                  {selectCloth.iron?<CheckBox title={chinese?'仅熨烫':'Iron Only'} onPress={()=>this.onSelectType('iron')}
                    checkedIcon='dot-circle-o' uncheckedIcon='circle-o' checked={quantityType==='iron'}/>:null}
                <Text style={{fontSize: 20, paddingTop: 16}}>{chinese?'数量':'Quantity'}</Text>
                <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-around',padding: 16}}>
                  <Icon name='add' color='green' size={40} onPress={this.onAddQuantity}/>
                  <Text style={{fontSize:24}}>{quantity||'n/a'}</Text>
                  <Icon name='remove' color='red' size={40} onPress={this.onMiniusQuantity}/>
                </View>
                <Button containerViewStyle={{marginVertical: 16}} title={chinese?'添加':'Add'} backgroundColor={primaryColor} color='white' onPress={this.onAddItem}/>
                <Button title={chinese?'取消':'Cancel'} backgroundColor='white' color='black' onPress={this.onCancelAdd}/>
              </View>
            }
          </RefreshScrollView>
        </Tab>
      </Tabs>
    );
  }
}

export default graphql(gql`
  query ClothesAutoInput($search:String,$userId:String,$type:String) {
    clothes(search:$search,userId:$userId,type:$type) {
      id
      imageUrl
      name
      wash
      dry
      iron
      washD
      dryD
      ironD
      preference
    }
  }
`, {
  props: ({ownProps, data: {clothes, refetch, loading}}) => {
    return {
      clothes,
      loading,
      refetch
    };
  }
})(ClothesAutoInput)
